<template>
  <div class="train">
    <h1>
      添加车次
      <p>
        <el-tag size="large" @click="$router.push('/')"> 取消</el-tag>
        &emsp;
        <el-tag @click="addSub" size="large"> 添加 </el-tag>
      </p>
    </h1>
    <el-row :gutter="5" class="row">
      <el-col :span="6">
        *车次<el-input
          size="small"
          placeholder="车次"
          v-model="form.train"
          maxlength="5"
          show-word-limit
        />
      </el-col>
      <el-col :span="6">
        <a>*车长</a>
        <el-input size="small" placeholder="车长" v-model="form.name" />
      </el-col>
      <el-col :span="6">
        <a> *车次类型 </a>
        <el-select
          v-model="form.type"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <a> *城市 </a>
        <el-input v-model="form.city" placeholder="请输入城市" />
      </el-col>
    </el-row>
    <!--  -->
    <!-- 车厢   每排座位 座位总数  -->
    <el-row class="trunk">
      <el-col :span="5"> 车厢总数 &emsp; {{ trunkAll }} </el-col>
      <el-col :span="5"> 座位总数 &emsp; {{ AllSeat }} </el-col>
      <el-col :span="5"> 限乘人数 &emsp; {{ limit }} </el-col>
      <el-col :span="4"> 无座人数 &emsp; {{ TwonoSeat }} </el-col>
    </el-row>
    <!-- 商务座  -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        商务车厢
        <el-input-number v-model="total.bines1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车排数
        <el-input-number v-model="total.bines2" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车车座数
        {{ (2 + 1) * total.bines1 * total.bines2 }}
      </el-col>
    </el-row>
    <!-- 一等座 -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        一等车厢
        <el-input-number v-model="total.one1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车排数
        <el-input-number v-model="total.one2" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车车座数
        {{ (2 + 2) * total.one1 * total.one2 }}
      </el-col>
    </el-row>
    <!-- 二等座 -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        二等车厢
        <el-input-number v-model="total.two1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车排数
        <el-input-number v-model="total.two2" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        每车车座数
        {{ (3 + 2) * total.two1 * total.two2 }}
      </el-col>
      <el-col :span="6">
        限乘人数
        <el-input-number v-model="total.two3" :min="1" :max="130" />
      </el-col>
      <el-col :span="3"> 无座人数 &ensp; {{ TwonoSeat }} </el-col>
    </el-row>
    <!-- 软卧 -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        软卧车厢
        <el-input-number v-model="total.soft1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车排数
        <el-input-number v-model="total.soft2" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        每车车座数
        {{ (4 + 22) * total.soft1 * total.soft2 }}
      </el-col>
      <el-col :span="6">
        限乘人数
        <el-input-number v-model="total.soft3" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        无座人数 &ensp; {{ total.soft3 - total.soft2 }}
      </el-col>
    </el-row>
    <!-- 硬卧 -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        硬卧车厢
        <el-input-number v-model="total.cash1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车排数
        <el-input-number v-model="total.cash2" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        每车车座数
        {{ (3 + 22) * total.cash2 }}
      </el-col>
      <el-col :span="6">
        限乘人数
        <el-input-number v-model="total.cash3" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        无座人数 &ensp; {{ total.cash3 - total.soft2 }}
      </el-col>
    </el-row>
    <!-- 硬座 -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        <a> 硬座 &emsp; &ensp; </a>
        <el-input-number v-model="total.seat1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        <a> 每车排数 </a>
        <el-input-number v-model="total.seat2" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        <a> 每车车座数 </a>
        {{ (5 + 24) * total.seat1 * total.seat2 }}
      </el-col>
      <el-col :span="6">
        <a> 限乘人数 </a>
        <el-input-number v-model="total.seat3" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        <a> 无座人数 </a>
        &ensp; {{ total.soft3 - total.soft2 }}
      </el-col>
    </el-row>
    <!-- 软座 -->
    <el-row :gutter="3" class="trunk">
      <el-col :span="6">
        软座车厢
        <el-input-number v-model="total.num1" :min="1" :max="100" />
      </el-col>
      <el-col :span="6">
        每车排数
        <el-input-number v-model="total.num2" :min="1" :max="130" />
      </el-col>
      <el-col :span="3">
        每车车座数
        {{ (2 + 20) * total.num1 * total.num2 }}
      </el-col>
      <el-col :span="6">
        限乘人数
        <el-input-number v-model="total.num3" :min="1" :max="130" />
      </el-col>
      <el-col :span="3"> 无座人数 &ensp; {{ total.num3 - total.num1 }} </el-col>
    </el-row>
  </div>
</template>

<script>
import { TrainAdd } from "api";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      title: this.$router.params,
      total: {
        bines1: 1, //商务座
        bines2: 8, //商务座2

        one1: 1, //一等车厢
        one2: 13,
        one3: 52,

        two1: 6, //二等车厢
        two2: 17,
        two3: 95,

        soft1: 2, //软卧车厢
        soft2: 5,
        soft3: 50,

        cash1: 6, //硬卧车厢
        cash2: 13,
        cash3: 70,

        seat1: 3, //硬座
        seat2: 5,
        seat3: 30,

        num1: 2, //软座
        num2: 4,
        num3: 60,
      },
      form: {
        city: "",
        type: "高速动车",
        train: "",
        name: "",
      },
      options: [
        "高速动车",
        "动车组",
        "城际高速",
        "直达特快",
        "空调特快",
        "快速",
        "普快",
      ],
    };
  },
  computed: {
    // 车厢总数
    trunkAll() {
      let con =
        this.total.bines1 +
        this.total.one1 +
        this.total.two1 +
        this.total.soft1 +
        this.total.num1 +
        this.total.cash1 +
        this.total.seat1;

      return con;
    },
    // 限乘人数
    limit() {
      return this.trunkAll + this.AllSeat;
    },
    // 车座总数
    AllSeat() {
      let num =
        (2 + 1) * this.total.bines1 * this.total.bines2 +
        (2 + 2) * this.total.one1 * this.total.one2 +
        (2 + 3) * this.total.two1 * this.total.two2 +
        (4 + 22) * this.total.soft1 * this.total.soft2 +
        (3 + 22) * this.total.cash2 +
        (5 + 24) * this.total.seat1 * this.total.seat2 +
        (2 + 20) * this.total.num1 * this.total.num2;
      return num;
    },
    // 二等 无座
    TwonoSeat() {
      return this.total.two2 - this.total.two1;
    },
  },
  methods: {
    async addSub() {
      // console.log(trunkAll)
      const res = await TrainAdd({ ...this.form, con: this.trunkAll,seat:this.AllSeat });
      if (res.data.code === 200) {
        ElMessage({
          message: res.data.msg,
          type: "success",
        });
      } else {
        ElMessage({
          message: res.data.msg,
          type: "warning",
        });
      }
    },
    handleChange(e, a) {
      this.one.con = e;
      if (e >= a) {
        this.num += 1;
        this.con += 10;
      } else if (e <= a) {
        this.num -= 1;
        this.con -= 10;
      } else {
        this.num = 1;
        this.con = 10;
      }
    },
    handleChange1(e, a) {
      this.one.seat = e;
      if (e >= a) {
        this.con += 1;
      } else if (e <= a) {
        this.con -= 1;
        this.all -= 1;
      } else if (e <= 10) {
        this.all += 10;
      }
      console.log(this.all, "123");
    },
  },
};
</script>

<style lang='scss' scoped>
.train {
  width: 95%;
  margin: 0px auto;
}
h1 {
  display: flex;
  width: 100%;
  line-height: 40px;
  border-bottom: solid 1px #ccc;
  padding-bottom: 20px;
  justify-content: space-between;

  font-size: 30px;
}
p {
  .el-tag {
    font-size: 20px;
    padding: 17px 34px;
  }
}
.row {
  line-height: 40px;
  font-size: 1.3em;
  a {
    float: left;
    padding-right: 2px;
    width: 130px;
  }
  .el-tag {
    font-size: 24px;
    padding: 20px 50px;
  }
  .el-input__wrapper {
    height: 50px;
  }
  .el-input,
  .el-select {
    width: 97%;
    height: 40px;
  }
}
.trunk {
  margin-top: 40px;
}
</style>